<template>
  <div class="pages-rating">
    <div class="pages-rating--title">收视分析</div>
    <div class="pages-rating--top">
      <div class="pages-rating--top--twinkle">
        <circle-twinkle class="pages-rating--top--twinkle__left" size="15px"></circle-twinkle>
        <circle-twinkle class="pages-rating--top--twinkle__right" size="15px"></circle-twinkle>
      </div>
      <div class="pages-rating--top__prebtn" @click="backClick"></div>
      <div class="pages-rating--top__nextbtn" @click="nextClick"></div>
    </div>
    <div class="pages-rating--ltop">
      <right-run class="pages-rating--ltop__right-run"
        width="55"
        height="20"
        :size="20"
        :lineWidth="5"
        color="#1debff"
      ></right-run>
      <div ref="echart_bar" style="width: 100%; height: 100%;"></div>
    </div>
    <div class="pages-rating--rtop">
      <right-run class="pages-rating--rtop__right-run"
        width="55"
        height="20"
        :size="20"
        :lineWidth="5"
        color="#1debff"
      ></right-run>
      <bar-3d
        width="1160px"
        height="390px"
        :xAxis="{data: ['20/02', '20/01', '19/12', '19/11', '19/10', '19/09', '19/08', '19/07', '19/06', '19/05', '19/04', '19/03', '19/02'], color: 'white'}"
        :yAxis="{color: 'white', name: '万人'}"
        :series="series"
        :showBoxTip="true"
      ></bar-3d>
    </div>
    <div class="pages-rating--bottom">
       <line-dance class="pages-rating--bottom__line-dance"
        width="220px"
        height="50px"
      ></line-dance>
      <right-run class="pages-rating--bottom__right-run"
        width="55"
        height="20"
        :size="20"
        :lineWidth="5"
        color="#1debff"
      ></right-run>
      <div class="pages-rating--bottom__cut-3d">
        <cut-3d v-for="(item, i) in cut3dData" :key="i" 
          width="336px" height="185px" 
          :image="item.image" 
          :bg="item.bg" 
          :data="item.data"
          borderRadius="5px"
          :style="{marginLeft: i !== 0 && i !== 5 ? '20px' : undefined}"
        ></cut-3d>
      </div>
    </div>
  </div>
</template>

<script>
import imageUrl from "../../assets/image/rating/1.jpg";
import image2Url from "../../assets/image/rating/2.jpg";
import bgUrl from "../../assets/image/rating/topic_bg.png";
export default {
  name: "PagesRating",
  data() {
    return {
      echartBar: null,
      barOption: {
        series: [{
          type: 'pie',
          radius: ['50%', '70%'],
          labelLine: {
            show: true,
            lineStyle: {
              width: 3
            }
          },
          label: {
            formatter: params => {
              return `${params.name}\n${params.percent}%`
            },
            fontSize: 21,
            color: 'rgb(96, 211, 213)'
          },
          data: [
            { value: 0.3, name: 'EPG', itemStyle: { color: 'rgb(47, 112, 123)' } }, 
            {value: 0.5, name: '直播', itemStyle: {color: 'rgb(96, 211, 213)'}},
            {value: 0.03, name: '回看', itemStyle: {color: 'rgb(29, 65, 80)'}},
            {value: 0.17, name: '点播', itemStyle: {color: 'rgb(76, 184, 189)'}}
          ]
        }]
      },
      series: [
        {
          data: [650, 710, 610, 600, 700, 650, 660, 670, 620, 630, 630, 700, 640],
          color: ['rgb(72, 135, 241)', 'rgb(72, 135, 241, .2)']
        },
        {
          data: [850, 810, 710, 700, 800, 850, 860, 870, 720, 730, 830, 800, 820],
          color: ['rgb(65, 206, 211)', 'rgb(65, 206, 211, .2)']
        }
      ],
      cut3dData: [
        {image: imageUrl, bg: bgUrl, data: {title: '少儿专题-奥特曼', pv: 17744, uv: 3207}}, 
        {image: imageUrl, bg: bgUrl, data: {title: '教育-粤课堂', pv: 19629, uv: 1862}}, 
        {image: imageUrl, bg: bgUrl, data: {title: '小猪佩奇过大年', pv: 19629, uv: 1862}}, 
        {image: image2Url, bg: bgUrl, data: {title: '少儿专题-任务页', pv: 44599, uv: 5494}},
        {image: imageUrl, bg: bgUrl, data: {title: '小猪佩奇过大年', pv: 19629, uv: 1862}}, 
        {image: image2Url, bg: bgUrl, data: {title: '少儿专题-任务页', pv: 44599, uv: 5494}}, 
        {image: imageUrl, bg: bgUrl, data: {title: '小猪佩奇过大年', pv: 19629, uv: 1862}}, 
        {image: image2Url, bg: bgUrl, data: {title: '少儿专题-任务页', pv: 44599, uv: 5494}},
        {image: imageUrl, bg: bgUrl, data: {title: '小猪佩奇过大年', pv: 19629, uv: 1862}}, 
        {image: imageUrl, bg: bgUrl, data: {title: '小猪佩奇过大年', pv: 19629, uv: 1862}}, 
      ]
    }
  },
  mounted() {
    this.echartBar = this.$Echarts.init(this.$refs.echart_bar);
    this.echartBar.setOption(this.barOption);
  },
  methods: {
    backClick() {
      this.$router.push({name: 'UserDevelopment'})
    },
    nextClick() {
      this.$router.push({name: 'UserPortrait'})
    }
  }
}
</script>

<style lang="less" scoped>
@import "./style.less";
</style>